<template>
  <div class="home">
    <!-- 不加 {{ getAlisle }} 的话，不会监听 -->
    <div style="display: none">{{ getUser }} {{getSessions}} </div>
    <div class="sidebar">
      <card></card>
      <list></list>
    </div>
    <div class="main">
      <message></message>
      <usertext></usertext>
    </div>
  </div>
</template>

<script>
import card from "../components/card.vue";
import list from "../components/list.vue";
import message from "../components/message.vue";
import usertext from "../components/usertext.vue";

import { mapState } from "vuex";

export default {
  name: "Home",
  components: { card, list, message, usertext },
  watch: {
    // myUser() {
    //   console.info("myUser:" + this.$store.getters.getMyUser);
    // },
  },
  computed: {
    ...mapState(["websock"]),
    getUser() { 
      this.$store.commit("setUser", this.$store.getters.getMyUser);
    },
    getSessions() { 
      this.$store.commit("setSessions", this.$store.getters.getMySessions);
    },
  },
  created() {},
  mounted: function () {
    //console.info(this.$route.params.name);

    if (!this.$route.params.name) {
      this.$message.error("请登录");
      this.$router.replace({ path: "/" });
      return;
    }
    this.name = this.$route.params.name;
    this.init();
  },
  methods: {
    init() {
      console.log("开始建立连接");
      const url = "ws://localhost:8282/room/" + this.name;

      this.$store.dispatch("WEBSOCKET_INIT", url);

      //this.$store.commit("initWebSock", url, this.baseUrl);
      // this.websock = new WebSocket(url);
      // this.websock.onopen = this.websockOpen; // 监听开启
      // this.websock.onclose = this.websockClose; //监听关闭
      // this.websock.onerror = this.websockError; //监听异常
      // this.websock.onmessage = this.websockMessage; //监听服务器发送的消息
    },
    websockOpen() {
      console.log("监听连接建立");
      // 渲染操作
    },
    websockClose() {
      console.log("监听连接关闭");
      // 渲染操作
    },
    websockError() {
      console.log("监听异常");
      // 渲染操作
    },
    websockMessage(e) {
      console.log("监听服务器发来的消息", e.data);

      //const myobj = JSON.parse(e.data);
      let msgObj = eval("(" + e.data + ")");
      if (msgObj.type === 0) {
        // 提示连接成功
        if (this.myAisle === "-1") {
          this.myAisle = msgObj.aisle;
          const num = Math.ceil((Math.random() * 1000000000) % 9);
          let myUser = {};
          myUser.name = msgObj.name;
          myUser.img = num;
          myUser.avatar = this.baseUrl + "images/" + num + ".jpeg";
          this.$store.commit("setUser", myUser);
        }

        this.people_num = msgObj.people_num;

        let data = [];

        for (var key in msgObj.people) {
          let obj = {};
          obj.id = key;

          const num = Math.ceil((Math.random() * 1000000000) % 9);
          let onLines = {};
          onLines.name = msgObj.people[key];
          onLines.img = key;
          obj.user = onLines;
          obj.aisle = key;
          obj.avatar = this.baseUrl + "images/" + num + ".jpeg";
          obj.messages = [];
          if (onLines.name != this.$store.state.user.name) {
            data.push(obj);
          }
        }
        this.$store.commit("INIT_DATA", data);
      }
      if (msgObj.type === 1) {
        //显示消息
        //console.log("接受消息");
        this.messageList.push(msgObj);
      }
    },
    sendMessage() {
      if (this.aisle === "") {
        this.$message({
          showClose: true,
          message: "请输入对方频道号",
          type: "error",
        });
        return;
      }
      let socketMsg = { msg: this.messageValue, toUser: this.aisle };
      socketMsg.type = 1;
      console.log("向服务器发送信息:" + JSON.stringify(socketMsg));
      this.websock.send(JSON.stringify(socketMsg));
      this.messageValue = "";
    },
    //主动关闭连接
    websockClose() {
      this.websock.close();
    },
  },
  data() {
    return {
      messageValue: "",
      people_num: 0,
      messageList: [], // 消息列表  
    };
  },
  //页面卸载时关闭连接
  destroyed() {
    // this.websock.close();
  },
  beforeDestroy() {
    // 服务器端将断开连接
    //this.websock.close();
    console.log("断开ws");
  },
};
</script>



<style lang="scss" scoped>
.home {
  margin: 20px auto;
  width: 800px;
  height: 600px;
  overflow: hidden;
  border-radius: 10px;
  .sidebar,
  .main {
    height: 100%;
  }
  .sidebar {
    float: left;
    color: #f4f4f4;
    background-color: #2e3238;
    width: 200px;
  }
  .main {
    position: relative;
    overflow: hidden;
    background-color: #eee;
  }
}
</style>